$(() => {
    //插入头部和尾部
    $(".m-head").load("./head.html");
    $(".footer").load("./footer1.html")

    function getDataWithPage1() {
        $.ajax({
            type: "get",
            url: "../server/daybest.php",
            dataType: "json",
            success: (data) => renderUI1(data)
        });
    }

    //渲染content-daybest
    function renderUI1(data) {
        let html = data.map((ele) => {
            return `
                    <div class="daybest-bottom-list">
                        <img src="${ele.titlephoto}" alt="">
                        <p>${ele.title}</p>
                        <p>${ele.shortTitle}</p>
                        <span>${ele.price}</span><del>${ele.price1}</del><br>
                        <span>限量400</span> <span>立即抢购</span>
                    </div>
            `
        }).join("")
        $(".daybest-bottom").html(html)
        for (let i = 0; i < data.length; i++) {
            $(".daybest-bottom-list").children().eq(7).click(function () {
                window.location.href = `${data[i].btn}`;
            })
        }
    }
    getDataWithPage1()



    // content-hot
    setInterval(() => {
        let off = $(".hot-bottom-count").offset()
        console.log(off)
        if (off.left == -315.5) {
            off.left = 344.5
        }
        $(".hot-bottom-count").offset({
            left: off.left - 220
        })
    }, 2000);


    new Promise(function (resolve, reject) {
        $.ajax({
            type: "get",
            url: "../server/contenthot.php",
            dataType: "json",
            success: (data) => {
                renderUI2(data)
                resolve();
            }
        });
    }).then(function () {
        renderUI2move()
    })


    // 渲染content-hot
    function renderUI2(data) {
        let html = data.map((ele) => {
            return `
                <div>
                <span class="p2-notic">
                    +关注
                </span>
                <img src = "${ele.photo}" class = "p2-pice">
                <span class="p2-add">${ele.followers}</span>
                <p class="p2-detil">${ele.desc}</p>
                <p class="p2-exit">进入品牌</p>
            </div> 
                `
        }).join("")
        $(".hot-bottom-p2").html(html)
        for (let i = 0; i < data.length; i++) {
            $(".p2-exit").eq(i).click(function () {
                window.location.href = `${data[i].enter}`;
            })
        }
    }

    function renderUI2move() {
        $(".hot-bottom-p2").children().hover(function () {
            $(this).children('.p2-notic').css("opacity", "1")
            $(this).children('.p2-pice').css({
                "width": "80px",
                "height": "80px",
                "left": "80px"
            })
            $(this).children('.p2-detil').css("opacity", "0")
            $(this).children('.p2-add').css("opacity", "1")
            $(this).children('.p2-exit').css("opacity", "1")
        }, function () {
            $(this).children('.p2-notic').css("opacity", "0")
            $(this).children('.p2-pice').css({
                "width": "133px",
                "height": "130px",
                "left": "50px"
            })
            $(this).children('.p2-detil').css("opacity", "1")
            $(this).children('.p2-add').css("opacity", "0")
            $(this).children('.p2-exit').css("opacity", "0")
        })
    }

    //main-right-back

    new Promise(function (resolve, reject) {
        $.ajax({
            type: "get",
            url: "../server/mainaciton.php",
            dataType: "json",
            success: (data) => {
                renderUI3(data)
                resolve();
            }
        });
    }).then(function () {
        renderUI3move()
        goodsmove()
    })

    function renderUI3(data) {
        let html = data.map((ele) => {
            return `
                    <div>
                        <div class="content-main-top">
                            <span>${JSON.stringify(ele.title).slice(1,5)}</span>
                            <span>${JSON.stringify(ele.title).slice(5,-1)}</span>
                            <span>更多好货></span>
                        </div>
                        <div class="content-main-center">
                            <div class="main-left">
                                <img src = "${ele.titlepic}">
                                <ul>
                                    <li>${ele.keyword1}</li>
                                    <li>${ele.keyword2}</li>
                                    <li>${ele.keyword3}</li>
                                    <li>${ele.keyword4}</li>
                                    <li>${ele.keyword5}</li>
                                    <li>${ele.keyword6}</li>
                                </ul>
                            </div>
                            <div class="main-center">
                                <ul class="main-center-list">
                                    <li>
                                        <p>${ele.hword1}</p>
                                        <p>${ele.spanword1}</p>
                                        <img src="${ele.hpic1}" alt="">
                                    </li>
                                    <li>
                                        <p>${ele.hword2}</p>
                                        <p>${ele.spanword2}</p>
                                        <img src="${ele.hpic2}" alt="">
                                    </li>
                                    <li>
                                        <p>${ele.hword3}</p>
                                        <p>${ele.spanword3}</p>
                                        <img src="${ele.hpic3}" alt="">
                                    </li>
                                    <li>
                                        <p>${ele.hword4}</p>
                                        <p>${ele.spanword4}</p>
                                        <img src="${ele.hpic4}" alt="">
                                    </li>
                                </ul>
                            </div>
                            <div class="main-right">
                                <div class="main-right-p1">
                                    <span>最近热卖</span>
                                </div>
                                <div class="main-right-p2">
                                    <div class="main-right-back">
                                        <ul>
                                            <li>
                                                <img src="${ele.pic1}" alt="">
                                                <p>${ele.name1}</p>
                                                <span>￥${ele.picA1}</span>
                                                <del>￥${ele.picA1*1+200}</del>
                                            </li>
                                            <li>
                                                <img src="${ele.pic2}" alt="">
                                                <p>${ele.name2}</p>
                                                <span>￥${ele.picA2}</span>
                                                <del>￥${ele.picA2*1+200}</del>
                                            </li>
                                            <li>
                                                <img src="${ele.pic3}" alt="">
                                                <p>${ele.name3}</p>
                                                <span>￥${ele.picA3}</span>
                                                <del>￥${ele.picA3*1+200}</del>
                                            </li>
                                            <li>
                                                <img src="${ele.pic4}" alt="">
                                                <p>${ele.name4}</p>
                                                <span>￥${ele.picA4}</span>
                                                <del>￥${ele.picA4*1+200}</del>
                                            </li>
                                        </ul>
                                        <ul>
                                            <li>
                                                <img src="${ele.pic5}" alt="">
                                                <p>${ele.name5}</p>
                                                <span>￥${ele.picA5}</span>
                                                <del>￥${ele.picA5*1+200}</del>
                                            </li>
                                            <li>
                                                <img src="${ele.pic6}" alt="">
                                                <p>${ele.name6}</p>
                                                <span>￥${ele.picA6}</span>
                                                <del>￥${ele.picA6*1+200}</del>
                                            </li>
                                            <li>
                                                <img src="${ele.pic7}" alt="">
                                                <p>${ele.name7}</p>
                                                <span>￥${ele.picA7}</span>
                                                <del>￥${ele.picA7*1+200}</del>
                                            </li>
                                            <li>
                                                <img src="${ele.pic8}" alt="">
                                                <p>${ele.name8}</p>
                                                <span>￥${ele.picA8}</span>
                                                <del>￥${ele.picA8*1+200}</del>
                                            </li>
                                        </ul>
                                        <ul>
                                            <li>
                                                <img src="${ele.pic9}" alt="">
                                                <p>${ele.name9}</p>
                                                <span>￥${ele.picA9}</span>
                                                <del>￥${ele.picA9*1+200}</del>
                                            </li>
                                            <li>
                                                <img src="${ele.pic10}" alt="">
                                                <p>${ele.name10}</p>
                                                <span>￥${ele.picA10}</span>
                                                <del>￥${ele.picA10*1+200}</del>
                                            </li>
                                            <li>
                                                <img src="${ele.pic11}" alt="">
                                                <p>${ele.name11}</p>
                                                <span>￥${ele.picA11}</span>
                                                <del>￥${ele.picA11*1+200}</del>
                                            </li>
                                            <li>
                                                <img src="${ele.pic12}" alt="">
                                                <p>${ele.name12}</p>
                                                <span>￥${ele.picA12}</span>
                                                <del>￥${ele.picA12*1+200}</del>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="content-main-bottom">
                            <div class="main-bottom-top">
                                <span>热卖品牌</span>
                            </div>
                            <div class="main-bottom-foot">
                                <ul class="main-bottom-foot-list">
                                    <li><img src="${ele.bottompic1}" alt=""><i></i></li>
                                    <li><img src="${ele.bottompic2}" alt=""><i></i></li>
                                    <li><img src="${ele.bottompic3}" alt=""><i></i></li>
                                    <li><img src="${ele.bottompic4}" alt=""><i></i></li>
                                    <li><img src="${ele.bottompic5}" alt=""><i></i></li>
                                </ul>
                            </div>
                        </div>
                    </div>
            `
        }).join("")
        $(".content-main").html(html)
    }

    function renderUI3move() {
        $(".main-bottom-foot-list").children().hover(function () {
            $(this).children("i").css("opacity", "1")
        }, function () {
            $(this).children("i").css("opacity", "0")
        })
    }

    function goodsmove() {
        setInterval(() => {
            let off = $(".main-right-back").offset()
            if (off.left == 554.5) {
                off.left = 1214.5
            }
            $(".main-right-back").offset({
                left: off.left - 220
            })
        }, 4000);
    }


    $(window).bind("scroll", function () {
        var top = $(this).scrollTop(); // 当前窗口的滚动距离
        // console.log(top)
        if (top >= 700) {
            $(".topTabPlaceHolder").css("opacity", "1")
            $(".content-navright").css({
                "position": "fixed",
                "top": "90px"
            })
            $(".content-navleft").css({
                "position": "fixed",
                "top": "70px"
            })

        } else {
            $(".topTabPlaceHolder").css("opacity", "0")
            $(".content-navright").css({
                "position": "absolute",
                "top": "550px"
            })
            $(".content-navleft").css({
                "position": "absolute",
                "top": "550px"
            })
        }
    });


    new Promise(function (resolve, reject) {
        $.ajax({
            type: "get",
            url: "../server/navleft.php",
            dataType: "json",
            success: (data) => {
                renderUI4(data)
                resolve();
            }
        });
    }).then(function () {
        for (let i = 0; i < $(".content-navleft-list").children().length; i++) {
            $(".content-navleft-list").children().eq(i).hover(function () {
                $(this).css("color", "#ff2e3f")
            }, function () {
                $(this).css("color", "#999")
            })
        }
        navleftfix()
    })
    // 渲染content-hot
    function renderUI4(data) {
        let html = data.map((ele) => {
            return `<li>${JSON.stringify(ele.title).slice(1,5)}</li>`
        }).join("")
        $(".content-navleft-list").html(html)
    }

    function navleftfix() {
            var lis = document.querySelectorAll('.content-main>div')
            var spans = document.querySelectorAll('.content-navleft-list>li');
            var timer = null;
            for(let i = 0,len = spans.length; i<len; i++){
                spans[i].onclick = function(){
                    // 点击span时移除scroll事件监听 防止滚动事件干扰滚动
                    window.removeEventListener('scroll', init);
                    // 把伪数值转换为数组再遍历所有的span元素去除所添加的类名
                    [...spans].forEach(item => item.className = "");
                    // 单独给当前点击的元素添加类名
                    this.className = 'active';
                    // 调用滚动动画函数
                    scrollAnimate(window.scrollY, lis[i].offsetTop+100);
                    console.log(window.scrollY,lis[i].offsetTop)
                }
            }
            // 初始化，当页面加载时 添加滚动事件监听
            window.addEventListener("scroll", init);
            // 初始化函数
            function init(){
                // 获取当前所在位置
                let y = window.scrollY;
                // 获取一个栏目的高度(注意：如果每个栏目的高度不一样则不能这么使用，只能遍历所有栏目进行比较)
                let h = lis[0].offsetHeight;
                // 清除所有span元素的类名
                [...spans].forEach(item => item.className = "");
                // 给当前所在位置的栏目添加类名
                spans[Math.floor(y/h)-2].className = "active";
                // console.log(Math.floor(y/h))
                // console.log(h)
            }
            // 调用初始化函数
            init();
            /* 
                滚动动画函数：
                参数说明：
                    第一个参数为当前滚动条所在位置,
                    第二个参数为滚动条需要到达的位置,
                    第三个参数为滚动时的步长
            */ 
            function scrollAnimate(from, to, step = 10){
                // 声明变量用于存储每次移动的距离
                let v = 0;
                // 在使用定时器之前先清除定时器，防止定时器叠加
                clearInterval(timer);
                // 添加一个定时器
                timer = setInterval(function(){
                    // 每次移动的距离(v) = (需要到达的目的地(to) - 现在所在的位置(from)) / step
                    v = (to - from) / step;
                    // 因为使用了除法，所有可能出现小数点，无法到达目标点，所有采用向上取整或向下取整
                    // 使用向上取整是因为当 v 为正的小数时(0.12525)向上取整就为 1
                    // 使用向下取整是因为当 v 为负的小数时(-0.12345)向下取整为 -1
                    // 为什么每次移动的距离会为负数，是因为，当从上往下移动时是逐渐增大，所有移动的距离为正数，当从下往上移动时，逐渐减小，所有移动的值为负数
                    v = v > 0 ? Math.ceil(v) : Math.floor(v);
                    // 在当前位置的基础上加上一个移动的距离
                    from += v;
                    // 开始移动
                    window.scrollTo(0, from);
                    // 当移动的距离到达目标位置时清除定时器
                    // 或前面的条件表示向下滚动时的目标位置，或后面的条件表示向上滚动时的目标位置
                    if(v > 0 && from >= to || v < 0 && from <= to){
                        // 清除定时器
                        clearInterval(timer);
                        // 添加滚动事件监听
                        window.addEventListener("scroll", init);
                    }
                },18)
            }
    
    
    
    /*        function getTop(el){
                let top = el.offsetTop;
                return (function(el){
                    el = el.parentNode;
                    if(getComputedStyle(el)['position'] !== 'static'){
                        top += el.offsetTop;
                    }
                    if(el === document.documentElement) {
                        return top;
                    }
                    return arguments.callee(el);
                })(el);
            }*/
    }

})